<!-- 打印模版页 -->
<template>
  <div class="printTemplate">
    <div id="print-area">
      <vueqr v-if="type=='in'&&printData.poCode" class="qrCode" :text="printData.poCode" :size="60" :margin="0" />
      <!-- 打印预览内容 -->
      <div class="order-confirmation" v-if="type=='in'">
        <div class="order-confirmation-header">
          <h2>浙江锋鸟新能源有限公司订单确认书</h2>
        </div>
        <div class="order-confirmation-box">
          <div class="header">
            <div class="text">订货单位: {{ printData?printData.company:'无' }}</div>
            <div class="text">采购联系人: {{ printData?printData.principal:'无' }}</div>
            <div class="text">联系电话: {{ printData?printData.principalTel:'无' }}</div>
            <div class="text">地址: {{ printData?printData.address:'无' }}</div>
            <div class="text">日期: {{ printData?printData.printDate:'无' }}</div>
          </div>
          
          <div class="order-details">
            <div class="text">供应单位: {{ printData?printData.vendorName:'无' }}</div>
            <div class="text">供应联系人: {{ printData?printData.contact:'无' }}</div>
            <div class="text">联系电话: {{ printData?printData.contactTel:'无' }}</div>
            <div class="text">地址: {{ printData?printData.vendorAddress:'无' }}</div>
            <div class="text">采购单据: {{ printData?printData.poCode:'无' }}</div>
          </div>
        </div>
  
        <div class="items" v-if="printData">
          <el-table
            :data="printData.lineList"
            border
            size="mini"
            show-summary
            :summary-method="summaryMethod"
            style="width: 98%"
          >
            <el-table-column type="index" label="序号" width="50" />
            <el-table-column prop="productCode" label="产品代码" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column width="50" prop="productSpc" label="规格" />
            <el-table-column prop="deliveryTime" label="交货日期" >
              <template slot-scope="scope">
                {{ parseTime(scope.row.deliveryTime,'{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column width="50" prop="quantity" label="数量" />
            <el-table-column width="50" prop="unitOfMeasure" label="单位" />
            <el-table-column width="50" prop="price" label="单价" />
            <el-table-column width="50" prop="totalPrice" label="小计" />
            <el-table-column prop="remark" label="备注" />
          </el-table>
          <div class="items-box">
            送货地址：{{ printData?printData.address:'' }}
          </div>
          <div class="items-box">
            <div class="items-box-left">开户行：</div>
            <div class="items-box-right">账号：</div>
          </div>
        </div>
  
        <div class="footer">
          <div class="text" style="margin-top: 15px;">说明：</div >
          <div class="text">1、本订单的具体执行方式一双方所签之产品销售协议为准（合同编号：  ）。</div >
          <div class="text">2、在收货时，请查验产品数量和质量，如发现数量或质量问题，请供方公司经手人签字确认。</div >
          <div class="text" style="margin-bottom: 15px;">3、送货单要备注清楚订单号或附订单二维码。</div >
          <div class="footer-box">
            <div class="footer-box-left">
              <div class="text">订货单位签章：</div >
              <div class="text">经办人：{{ printData?printData.purchaser:''}}</div >
            </div>
            <div class="footer-box-right">
              <div class="text">供货单位签章：</div >
              <div class="text">经办人：</div >
            </div>
          </div>
        </div>
      </div>

      <div class="order-confirmation" v-else>
        <div class="order-confirmation-header">
          <h2>浙江锋鸟新能源有限公司采购退货单</h2>
        </div>
        <div class="order-confirmation-box">
          <div class="header">
            <div class="text">供货单位: {{ printData?printData.vendorName:'无' }}</div >
            <div class="text">供应联系人: {{ printData?printData.contact:'无' }}</div >
            <div class="text">联系电话: {{ printData?printData.contactTel:'无' }}</div >
            <div class="text">地址: {{ printData?printData.vendorAddress:'无' }}</div >
            <div class="text">采购单据: {{ printData?printData.poCode:'无' }}</div >
          </div>
    
          <div class="order-details">
            <div class="text">订货单位: {{ printData?printData.company:'无' }}</div >
            <div class="text">采购员: {{ printData?printData.purchaser:'无' }}</div >
            <div class="text">制单人: {{ printData?printData.principal:'无' }}</div >
            <div class="text">退货单号: {{ printData?printData.rtCode:'无' }}</div >
            <div class="text">单据日期: {{ printData?printData.printDate:'无' }}</div >
          </div>
        </div>
  
        <div class="items" v-if="printData">
          <el-table
            :data="printData.lineList"
            border
            size="mini"
            show-summary
            :summary-method="summaryMethod"
            style="width: 98%"
          >
            <el-table-column type="index" label="序号" width="50" />
            <el-table-column prop="itemCode" label="产品代码" />
            <el-table-column prop="itemName" label="产品名称" />
            <el-table-column prop="specification" label="规格型号" />
            <el-table-column prop="warehouseName" width="50" label="仓库" />
            <el-table-column prop="quantityRted" width="50" label="数量" />
            <el-table-column prop="unitOfMeasure" width="50" label="单位" />
            <el-table-column prop="price" width="50" label="单价" />
            <el-table-column prop="totalPrice" width="50" label="小计" />
            <el-table-column prop="remark" label="备注" />
          </el-table>
          <div class="items-box">
            送货地址：{{ printData?printData.vendorAddress:'无' }}
          </div>
          <div class="items-box">
            <div class="items-box-left">开户行：</div>
            <div class="items-box-right">账号：</div>
          </div>
        </div>
  
        <div class="footer">
          <div class="text" style="margin-top: 15px;">说明: </div >
          <div style="text-indent:2em;margin-bottom: 15px;" >本订单的具体执行方式--双方所欠之产品销售协议为准（合同编号：xxxxxxxxxxxxxxxxxxx）</div >
        </div>
      </div>
    </div>
    <!-- 打印按钮 -->
    <el-button class='print-button' type='primary' @click="printOrder">打印</el-button>
  </div>
</template>

<script>
import { rtvendorPrintData, poPrintData } from '@/api/mes/printTemplate'
import vueqr from 'vue-qr'
export default {
  components: { vueqr },
  data() {
    return {
      order: {
        customer: "浙江锋鸟新能源有限公司",
        supplier: "供应商名称",
        supplierContact: "联系人",
        supplierPhone: "1234567890",
        orderNumber: "P240730002",
        orderDate: "2024/02/09",
        deliveryDate: "2025/02/09",
        deliveryLocation: "浙江省杭州市",
        totalAmount: "零元整",
        handler: "徐维平",
        items: [
          { id: 1, name: "330主线", model: "MK2", deliveryDate: "2025/02/09", quantity: 500, unitPrice: 100, amount: 50000 },
          { id: 2, name: "3号主线250mm", model: "MK2", deliveryDate: "2025/02/09", quantity: 500, unitPrice: 120, amount: 60000 },
          { id: 3, name: "3号主线400mm", model: "MK2", deliveryDate: "2025/02/09", quantity: 500, unitPrice: 140, amount: 70000 },
          { id: 4, name: "neo", model: "neo", deliveryDate: "2025/02/09", quantity: 1, unitPrice: 100, amount: 100 },
        ],
      },
      tableData: [],
      type: undefined,
      id: undefined,
      printData: undefined,
    };
  },
  mounted() {
    if(this.$route.query.type === 'in'){
      this.type = 'in'
      this.id = this.$route.query.poId
    }else if(this.$route.query.type === 'out'){
      this.type = 'out'
      this.id = this.$route.query.rtId
    }
    this.getList()
    console.log('this.$route.query', this.$route.query);
  },
  methods: {
    // 合计计算方法
    summaryMethod({ columns, data }) {
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '总计';
            return;
          }
        if (index === 5 || index === 7 || index === 8) { // 指定列进行合计（例如金额列）
          const sum = data.reduce((prev, current) => {
            return prev + (Number(current[column.property]) || 0);
          }, 0);
          sums[index] = sum;
        } else {
          sums[index] = ''; // 其他列为空
        }
      });
      return sums;
    },
    // 获取打印列表数据
    getList(){
      if(this.type === 'in'){
        poPrintData(this.id).then(res => {
          this.printData = res.data
          console.log('res', res);
        })
      }else if(this.type === 'out'){
        rtvendorPrintData(this.id).then(res => {
          this.printData = res.data
          console.log('res', res);
        })
      }
    },
    printOrder() {
      window.print();
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    },
  }
};
</script>

<style lang='scss' scoped>
::v-deep .el-table--mini .el-table__cell {
  padding: 0; 
}
::v-deep .el-table .el-table__cell {
  padding: 0;
}
::v-deep .el-table .cell {
  line-height: 20px;
}
.printTemplate{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#print-area {
  width: 210mm;
  height: 297mm;
  padding: 5mm 10mm;
  box-sizing: border-box;
  position: relative;
  .qrCode{
    position: absolute;
    left: 10mm;
    top: 5mm;
  }
}
.order-confirmation {
  margin-bottom: 20px;
  &-header{
    text-align: center;
  }
  &-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text{
      margin: 5px 0;
      font-size: 12px;
    }
  }
  .items{
    box-sizing: border-box;
    padding: 2px;
    margin-bottom: 5px;
    &-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #dfe6ec;
      line-height: 26px;
      font-size: 12px;
      // box-sizing: border-box;
      color: #606266;
      padding: 0 10px;
      width: 98%;
      &-left{
        width: 50%;
      }
      &-right{
        width: 50%;
      }
      &:last-child{
        border-top: none;
      }
    }
  }
}
.header, .order-details {
  width: 50%;
}
.footer {
  // margin-bottom: 15px;
  .text{
    margin: 5px 0;
  }
}

.total {
  margin-top: 20px;
}
.footer {
  font-size: 10pt;
  &-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-left{
      width: 50%;
    }
    &-right{
      width: 50%;
    }
    .text{
      margin: 5px 0;
    }
  }
}
@media print {
  .el-table {
    border: 1px solid #e4e4e4 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
  }

  .el-table th, .el-table td {
    border: 1px solid #e4e4e4 !important;
  }

  .el-table__body-wrapper {
    overflow: visible !important;
  }
   /* 隐藏页面底部的 URL 和标题 */
  @page {
    size: auto; /* 不强制指定纸张大小，保持浏览器默认 */
    margin: 0; /* 去掉默认的边距 */
  }
  body {
    font-family: Arial, sans-serif;
    font-size: 12pt;
    color: #000;
    margin: 0;
    padding: 0;
  }
  .printTemplate{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #print-area {
    width: 210mm;
    height: 297mm;
    padding: 5mm 10mm;
    box-sizing: border-box;
  }
  .order-confirmation {
    margin-bottom: 20px;
    &-header{
      text-align: center;
    }
    &-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .text{
        margin: 5px 0;
        font-size: 12px;
      }
    }
    .items{
      box-sizing: border-box;
      padding: 2px;
      margin-bottom: 5px;
      &-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #dfe6ec;
        line-height: 26px;
        font-size: 12px;
        // box-sizing: border-box;
        color: #606266;
        padding: 0 10px;
        width: 98%;
        &-left{
          width: 50%;
        }
        &-right{
          width: 50%;
        }
        &:last-child{
          border-top: none;
        }
      }
    }
  }
  .header, .order-details {
    width: 50%;
  }
  .footer {
    // margin-bottom: 15px;
    .text{
      margin: 5px 0;
    }
  }

  .total {
    margin-top: 20px;
  }
  .footer {
    font-size: 10pt;
    &-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-left{
        width: 50%;
      }
      &-right{
        width: 50%;
      }
      .text{
        margin: 5px 0;
      }
    }
  }
  // 隐藏打印按钮
  .print-button{
    display: none;
  }
}
</style>
